import { useAccount, useChains, useSwitchChain } from "wagmi";
import styles from "../styles/Home.module.css";

function NetworkSwitcher() {
  const { chain, chainId, isConnected } = useAccount();
  const { switchChain } = useSwitchChain();
  const chains = useChains();

  return (
    <div>
      <div>Current chain: {isConnected ? chain?.name || chainId : "Not connected"}</div>
      {isConnected && (
        <div className={styles.networkSwitcher_options}>
          {chains
            .filter((it) => it.id !== chainId)
            .map((it) => (
              <button key={it.id} onClick={() => switchChain({ chainId: it.id })}>
                Switch to {it.name}
              </button>
            ))}
        </div>
      )}
    </div>
  );
}

export default NetworkSwitcher;
